<template>
    <div class="account-box">
        <div class="login" v-show="accountSta === 0">
            <h1 class="login">登录</h1>
            <button @click="accountOperationSwitch(1)">注册</button>
            <button @click="accountOperationSwitch(3)">忘记密码</button>
        </div>

        <div class="login" v-show="accountSta === 1">
            <h1 class="login">注册</h1>
            <button @click="accountOperationSwitch(0)">登录</button>
            <button @click="accountOperationSwitch(3)">忘记密码</button>
        </div>

        <div class="login" v-show="accountSta === 3">
            <h1 class="login">忘记密码</h1>
            <button @click="accountOperationSwitch(0)">登录</button>
            <button @click="accountOperationSwitch(1)">注册</button>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        name: "login",
        computed: {
            ...mapGetters([
                'accountSta'
            ])
        },
        mounted () {
            console.log(222);
        },
        methods: {
            accountOperationSwitch (sta) {
                this.setAccountSta(sta)
            },
            ...mapMutations({
                setAccountSta: 'SET_ACCOUNT_STATUS'
            })
        }
    }
</script>

<style scoped>
    h1 {
        margin-bottom: 15px;
    }
</style>